1
00:00:00,660 --> 00:00:02,760
Hello and welcome to this lecture.

2
00:00:02,910 --> 00:00:12,390
In this lecture we are going to create the stylin for our app using CNS.

3
00:00:12,900 --> 00:00:21,330
So this is the first violin where we use for our Happe from the external CSF far so I'll just run through

4
00:00:21,330 --> 00:00:23,260
the styling with you.

5
00:00:23,490 --> 00:00:28,510
Line 1 2 5 is the first selector.

6
00:00:28,680 --> 00:00:38,300
So we are using the button one IED selector that button one was defined in our hastier Melb.

7
00:00:38,310 --> 00:00:46,830
So what I'm saying here is that the padding padding refers to the space inside the element while margin

8
00:00:46,830 --> 00:00:49,810
refers So this is outside.

9
00:00:49,930 --> 00:00:52,110
They both have four corners wishlist.

10
00:00:52,110 --> 00:01:00,150
Top right bottom left side said and one the padding to be 10 pixels for all four corners.

11
00:01:00,150 --> 00:01:06,190
Top right bottom left or the radius are specified to be 30 pixels.

12
00:01:06,270 --> 00:01:11,810
Body radios makes is what gives s ears square or rectangle.

13
00:01:11,810 --> 00:01:14,700
They're round at round corners.

14
00:01:14,880 --> 00:01:18,500
Have said that background colour to lime.

15
00:01:19,320 --> 00:01:22,870
Paul button No.

16
00:01:23,150 --> 00:01:24,700
I've got a but an idea here.

17
00:01:24,700 --> 00:01:25,660
Call button.

18
00:01:25,690 --> 00:01:26,370
Ha.

19
00:01:26,770 --> 00:01:35,900
Again Spad in 10 pixels similar stiring with the first button and then a court.

20
00:01:36,210 --> 00:01:38,980
Has got good image.

21
00:01:39,000 --> 00:01:46,830
This is it makes Tag have said the with for the image or the whole one all the images to have the same

22
00:01:46,830 --> 00:01:48,490
size and height.

23
00:01:48,540 --> 00:01:55,800
So this is where I have set it and one way to be in line 5 is pixels and the height 5 7 8 pixels you

24
00:01:55,800 --> 00:01:59,930
could play around with values and change it if you wish.

25
00:01:59,940 --> 00:02:02,800
Just to see the one that suits you best.

26
00:02:03,170 --> 00:02:07,230
I have got another class here quad wrapper.

27
00:02:07,260 --> 00:02:10,350
This is a container and have at the margin.

28
00:02:10,350 --> 00:02:13,170
This is the rabbis what were wrap the images.

29
00:02:13,180 --> 00:02:21,600
Each hole is what will form be main slider so I have set the margin from the left to move a hundred

30
00:02:21,600 --> 00:02:26,690
pixels so that the files save the thiamine.

31
00:02:26,700 --> 00:02:34,710
Then we can have a look and see what the projet looks like if I just refresh it can see this time in

32
00:02:34,710 --> 00:02:38,570
the margin from the left eyes.

33
00:02:38,640 --> 00:02:41,940
I used to move this from the left to 100 pixels.

34
00:02:41,940 --> 00:02:43,580
Shift it that way.

35
00:02:43,920 --> 00:02:47,970
Okay so we defined that using.

36
00:02:48,780 --> 00:02:51,040
We defined our use in this margin here.

37
00:02:51,060 --> 00:02:57,870
What I am saying that from the left I wanted to shift a hundred pixels which is what you call he was

38
00:02:57,900 --> 00:03:04,200
previously on the corner so the margin has now shifted 100 pixel this week.